<!-- 扇形图 -->
<template>
  <div id="BigPie">
    <div ref="pie1" class="pieBox"></div>
  </div>
</template>

<script>
export default {
  props: {
    valueData: Array | Object,
    iswrap: false,
  },
  components: {},
  data() {
    return {
      colorList: [
        "#1779ff",
        "#fd7f2c",
        "#06f0ab",
        "#b710fc",
        "#fcbc10",
        "#00ccff",
        "#c5f600",
        "#ff00a8",
        "#ff5400",
        "#00ffd8",
        "#fff600",
        "#00f645",
        "#f3a4ff",
        "#0000ff",
        "#00f6ff",
        "#ffdb9c",
        "#33d7b2",
        "#c6a4ff",
        "#2bc61b",
        "#80f2ff",
        "#ff9c9c",
        "#79c172",
        "#6edcaa",
        "#b8a92d",
        "#cf56bf",
        "#d0e2cf",
        "#c8b594",
        "#d8f7ff",
      ],
      wrap: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.iswrap == true) {
      this.wrap = "\n";
    } else {
      this.wrap = "";
    }
  },
  mounted() {
    this.drawpie();
  },

  methods: {
    drawpie() {
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = that.$echarts.init(that.$refs.pie1);
      let option = {
        color: that.colorList,
        tooltip: {
          trigger: "item",
          formatter: "{b} :{d}%",
          confine: true, //将此限制打开后tooltip将不再溢出
        },
        // grid: {
        //   top: "15%", // 组件离容器上侧的距离,百分比字符串或整型数字
        //   left: "35%", // 组件离容器左侧的距离,百分比字符串或整型数字
        //   right: "35%",
        //   bottom: "3%",
        //   containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["42%", "55%"],
            center: ["50%", "50%"],
            minAngle: 18,
            labelLine: {
              // 设置指示线的长度
              normal: {
                length: 12,
                length2: 8,
              },
            },
            label: {
              // position: "inside",
              formatter: " {b|{b}：}" + that.wrap + "{d|{d}% }",
              // formatter: " {b|{b}：}{d|{d}% }",
              borderColor: "#aaa",
              avoidLabelOverlap: true,
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 33,
                },
                d: {
                  align: "center",
                },
              },
            },
            data: that.valueData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang='less' scoped>
#BigPie {
  width: 100%;
  height: 100%;
  .pieBox {
    width: 100%;
    height: 100%;
  }
}
</style>